import React, { Component } from 'react';
import $ from 'jquery';

// require('./../mock')

class Com extends Component {
  constructor(props) {
    super(props);
    this.state={
      dat:[],
      topname:''
    }
  }
  componentDidMount() {
    let f_name = JSON.parse(localStorage.getItem('f_name'))
    this.setState({
      topname: f_name
    })
    
    let name = JSON.stringify(f_name)
    fetch(`https://sun.daxunxun.com/api/food/kind?f_name=`+name)
    .then(res => res.json())
    .then(data => {
      console.log(data)
      this.setState({
        dat: data
      })
    })
  }
  goDetail (fid){
    this.props.history.push('/detail/' + fid)
  }
  goUsers (uname) {
    this.props.history.push('/users/'+ uname)
    localStorage.setItem('u_name', JSON.stringify(uname))
  }
  // 按评分排序
  sortScore () {
    let topname = this.state.topname
    let name = JSON.stringify(topname)
    fetch(`https://sun.daxunxun.com/api/food/sortScore?f_name=`+name)
    .then(res => res.json())
    .then(data => {
      console.log(data)
      this.setState({
        dat: data
      })
    })
    $("h3").css("color","rgba(0, 0, 0, 0.65)").siblings().css("color", "#DD3915")
  }
  // 按欢迎度排序
  sortPop () {
    let topname = this.state.topname
    let name = JSON.stringify(topname)
    fetch(`https://sun.daxunxun.com/api/food/sortPop?f_name=`+name)
    .then(res => res.json())
    .then(data => {
      console.log(data)
      this.setState({
        dat: data
      })
    })
    $(".pop").css("color","rgba(0, 0, 0, 0.65)").siblings().css("color", "#DD3915")
  }
  // 默认排序
  defail () {
    let f_name = this.state.topname
    let name = JSON.stringify(f_name)
    fetch(`https://sun.daxunxun.com/api/food/kind?f_name=`+name)
    .then(res => res.json())
    .then(data => {
      console.log(data)
      this.setState({
        dat: data
      })
    })
    $("span").css("color","rgba(0, 0, 0, 0.65)").siblings().css("color", "#DD3915")
  }
  render() {
    let dat = this.state.dat
    // console.log(list)
    let arr = [];
    let topname = [];
    for (var i in dat) {
      if (i<14) {
        // console.log(dat[i])
        let fid = dat[i].f_id  // 获取食物id
        let uname = dat[i].u_name
        topname.push()
        arr.push(
          <li key={dat[i].f_id} >
            <div className="kindImg" onClick={ this.goDetail.bind(this, fid)}>
              <img src={dat[i].banner} alt="" />
            </div>
            {/* <div className="Recipe_spand">
              <span>
                {dat[i].name}
              </span>
            </div> */}
            <div className="_Kind_ul_li">
            <div className="_li_li1" onClick={ this.goDetail.bind(this, fid)}><a>{dat[i].name}</a><span>步骤图</span></div>
            <div className="_li_li2"><span>{dat[i].ingredients}</span></div>
            <div className="_li_li3"><span>综合评分<i>{dat[i].score}</i>( 七天内<em>{dat[i].number}</em>人做过 )</span></div>
            <div className="_li_li4"  onClick={ this.goUsers.bind(this,uname)}><span>{dat[i].u_name}</span></div>
            </div>
          </li>
        )
      }
    }
    return (
      <div className="Kind_content">
        <div className="Kind_biaoti">
          <span className="topname">{this.state.topname}</span>
        </div>
        <div className="Kind_xiaobiaoti">
          <span onClick={this.defail.bind(this)}>最近流行</span><b>|</b><p className="pop" onClick={this.sortPop.bind(this)}>最受欢迎</p><b>|</b><h3 onClick={this.sortScore.bind(this)}>评分</h3>
        </div>
        <div className="Kind_score">
          <ul className="_Kind_ul">
            {
              arr
            }
              
          </ul>
        </div>
      </div>
    )
  }
}

export default Com;
